import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Layout from '@/layout/index.vue'
import store from '@/store'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  // 路由配置规则
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: 'login' */ '@/views/login/index.vue')
  },
  {
    path: '/',
    component: Layout,
    meta: {
      name: '首页',
      requireAyth: true // 自定义数据
    },
    children: [
      // {
      //   path: '', // 默认子路由
      //   name: 'home',
      //   component: () => import(/* webpackChunkName: 'home' */ '@/views/home/index.vue')
      // },
      {
        path: '/role',
        name: 'role',
        meta: {
          name: '角色管理'
        },
        component: () => import(/* webpackChunkName: 'role' */ '@/views/role/index.vue')
      },
      {
        path: '/menu',
        name: 'menu',
        meta: {
          name: '菜单管理'
        },
        component: () => import(/* webpackChunkName: 'menu' */ '@/views/menu/index.vue')
      },
      {
        path: '/resource',
        name: 'resource',
        meta: {
          name: '资源管理'
        },
        component: () => import(/* webpackChunkName: 'resource' */ '@/views/resource/index.vue')
      },
      {
        path: '',
        name: 'course',
        meta: {
          name: '课程管理'
        },
        component: () => import(/* webpackChunkName: 'course' */ '@/views/course/index.vue')
      },
      {
        path: '/user',
        name: 'user',
        meta: {
          name: '用户管理'
        },
        component: () => import(/* webpackChunkName: 'user' */ '@/views/user/index.vue')
      },
      {
        path: '/advert',
        name: 'advert',
        meta: {
          name: '广告管理'
        },
        component: () => import(/* webpackChunkName: 'advert' */ '@/views/advert/index.vue')
      },
      {
        path: '/advert/create',
        name: 'advert-create',
        meta: {
          name: '添加广告'
        },
        component: () => import(/* webpackChunkName: 'advert-create' */ '@/views/advert/advert-create.vue')
      },
      {
        path: '/advert/:advertId/edit',
        name: 'advert-edit',
        meta: {
          name: '编辑广告'
        },
        props: true,
        component: () => import(/* webpackChunkName: 'advert-create' */ '@/views/advert/advert-edit.vue')
      },
      {
        path: '/advert-space',
        name: 'advert-space',
        meta: {
          name: '广告位管理'
        },
        component: () => import(/* webpackChunkName: 'advert-space' */ '@/views/advert-space/index.vue')
      },
      {
        path: '/menu/create',
        name: 'menu-create',
        meta: {
          name: '添加菜单'
        },
        component: () => import(/* webpackChunkName: 'menu-create-edit' */ '@/views/menu/create.vue')
      },
      {
        path: '/menu/:id/edit',
        name: 'menu-edit',
        meta: {
          name: '编辑菜单'
        },
        component: () => import(/* webpackChunkName: 'menu-create-edit' */ '@/views/menu/edit.vue')
      },
      {
        path: '/role/:roleId/allocMenu',
        name: 'alloc-menu',
        meta: {
          name: '分配菜单'
        },
        props: true,
        component: () => import(/* webpackChunkName: 'alloc-menu' */ '@/views/role/alloc-menu.vue')
      },
      {
        path: '/role/:roleId/allocResource',
        name: 'alloc-resource',
        meta: {
          name: '分配资源'
        },
        props: true,
        component: () => import(/* webpackChunkName: 'alloc-resource' */ '@/views/role/alloc-resource.vue')
      },
      {
        path: '/courses/new',
        name: 'course-create',
        meta: {
          name: '添加课程'
        },
        component: () => import(/* webpackChunkName: 'course-create' */ '@/views/course/course-create.vue')
      },
      {
        path: '/courses/:courseId/edit',
        name: 'course-edit',
        meta: {
          name: '编辑课程'
        },
        props: true,
        component: () => import(/* webpackChunkName: 'course-create' */ '@/views/course/course-edit.vue')
      },
      {
        path: '/courses/:courseId/sections',
        name: 'course-sections',
        meta: {
          name: '课程内容管理'
        },
        props: true,
        component: () => import(/* webpackChunkName: 'course-sections' */ '@/views/course/course-sections.vue')
      }
    ]
  },
  {
    path: '*',
    name: '404',
    component: () => import(/* webpackChunkName: '404' */ '@/views/error-page/404.vue')
  }
]

const router = new VueRouter({
  routes
})

// 全局前置守卫
// to: 将要前往的路由信息
// from: 从哪里来的路由信息
// next: 通行的标志
router.beforeEach((to, from, next) => {
  // 路由守卫中一定要调用 next，否则页面无法显示
  if (to.matched.some(record => record.meta.requireAyth)) {
    // 匹配所有被匹配到的路由对象有符合条件的路由对象
    if (!store.state.user) {
      // 没有登录状态跳转到登录页面
      next({
        name: 'login',
        query: { // 通过 url 传递查询字符串参数
          redirect: to.fullPath // 吧登录成功需要返回的页面告诉登录页面
        }
      })
    } else {
      next() // 运行通过
    }
  } else {
    next() // 运行通过
  }
})

export default router
